<template>
  <div class="wrapper">
    <!-- Header部分 -->
    <header>
      <p>骑手登录</p>
    </header>

    <!-- 登录表单 -->
    <ul class="form-box">
      <li>
        <div class="title">手机号码：</div>
        <div class="content">
          <input type="text" 
                 v-model="deliveryManId"
                 placeholder="请输入骑手手机号">
        </div>
      </li>
      <li>
        <div class="title">登录密码：</div>
        <div class="content">
          <input type="password" 
                 v-model="password"
                 placeholder="请输入密码">
        </div>
      </li>
    </ul>

    <!-- 操作按钮 -->
    <div class="button-login">
      <button @click="handleLogin">立即登录</button>
    </div>
    <div class="button-register">
      <button @click="goToRegister">没有账号？立即注册</button>
    </div>

    <!-- 底部导航 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'DeliveryManLogin',
  data() {
    return {
      deliveryManId: '',   // 对应后端的deliveryManId
      password: ''         // 保持相同字段名
    }
  },
  methods: {
    // 表单验证方法
    validateForm() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      
      if (!this.deliveryManId.trim()) {
        alert('请输入手机号码');
        return false;
      }
      
      if (!phoneRegex.test(this.deliveryManId)) {
        alert('请输入有效的11位手机号');
        return false;
      }
      
      if (!this.password) {
        alert('请输入登录密码');
        return false;
      }
      
      return true;
    },

    // 登录处理
    async handleLogin() {
      if (!this.validateForm()) return;

      try {
        const response = await this.$axios.get('/DeliveryMan/Login', {
          params: {
            deliveryManId: this.deliveryManId,
            password: this.password
          }
        });

        this.processLoginResponse(response.data);
      } catch (error) {
        this.handleLoginError(error);
      }
    },

    // 处理登录响应
    processLoginResponse(data) {
      if (!data.result) {
        alert('账号或密码错误');
        return;
      }

      const deliveryMan = data.result;
      this.$setSessionStorage('deliveryMan', {
        id: deliveryMan.deliveryManId,
        name: deliveryMan.name
      });

      this.redirectToOrderPage();
    },

    // 跳转到订单页面
    redirectToOrderPage() {
      this.$router.push({
      	path: '/deliveryMan',
      	query: {
      		deliveryManId: this.deliveryManId
      	}
      });
    },

    // 错误处理
    handleLoginError(error) {
      console.error('登录请求失败:', error);
      if (error.response) {
        switch (error.response.status) {
          case 404:
            alert('服务未找到，请联系管理员');
            break;
          default:
            alert('服务器异常，代码：' + error.response.status);
        }
      } else {
        alert('网络连接异常，请检查网络设置');
      }
    },

    // 跳转注册页面
    goToRegister() {
      this.$router.push('/deliveryManRegister');
    }
  },
  components: {
    Footer
  }
}
</script>

<style scoped>
/* 总容器 */
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
}

/* Header样式 */
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 表单容器 */
.form-box {
  width: 100%;
  margin-top: 12vw;
  padding: 4vw 3vw 0;
  background: white;
}

.form-box li {
  padding: 4vw 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

/* 表单项样式 */
.title {
  flex: 0 0 22vw;
  font-size: 3.8vw;
  color: #333;
  font-weight: 500;
}

.content input {
  width: 100%;
  height: 8vw;
  border: none;
  outline: none;
  font-size: 3.8vw;
  padding: 1vw 0;
  background: transparent;
}

.content input::placeholder {
  color: #aaa;
}

/* 按钮样式 */
.button-login {
  margin: 8vw 3vw 0;
}

.button-register {
  margin: 4vw 3vw 0;
}

button {
  width: 100%;
  height: 12vw;
  border: none;
  border-radius: 6vw;
  font-size: 4.2vw;
  font-weight: 500;
  transition: all 0.3s;
}

.button-login button {
  background: #0097FF;
  color: white;
  box-shadow: 0 2px 6px rgba(0,151,255,0.3);
}

.button-login button:active {
  background: #0077CC;
}

.button-register button {
  background: transparent;
  color: #0097FF;
  border: 1px solid #0097FF;
}

.button-register button:active {
  background: rgba(0,151,255,0.1);
}

/* 底部导航适配 */
.wrapper .footer {
  position: fixed;
  bottom: 0;
}
</style>